<template>
  <div id="index">
    <div class="swiper">
      <swiper
        circular="true"
        indicator-dots="true"
        indicator-color="white"
        indicator-active-color="black">
        <swiper-item>
          <img src="/static/index/food1.png" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/index/food2.png" alt="">
        </swiper-item>
        <swiper-item>
          <img src="/static/index/food3.png" alt="">
        </swiper-item>
      </swiper>
    </div>
    <div id="order">
      <div class="item" @click="toOrderDetail('1')">
        <div class="title">
          <img src="/static/images/user.png" alt="">
          <span class="name">店铺名称</span>
          <span class="status">进行中</span>
        </div>
        <div class="body">
          <div class="detail">
            <div class="foodItem">
              <span>菜品1</span>
              <span>菜品2</span>
              <span>菜品3</span>
            </div>
            <span class="more">查看更多</span>
            <img src="/static/index/more.png" alt="">
          </div>
          <span class="time">下单时间：0000-00-00 00:00:00</span>
          <div class="total">
            <span>合计￥</span>
            <span class="price">288.00</span>
          </div>
        </div>
        <div class="footer">
          <button class="pay" @click="toOrderDetail('2')">结算</button>
          <button class="extraMeals" @click="toOrder()">加餐</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    methods:{
      toOrderDetail(status){
        wx.navigateTo({
          url:'/pages/orderDetail/main?status=' + status
        })
      },
      toOrder(){
        wx.navigateTo({
          url:'/pages/order/main'
        })
      }
    }
  }
</script>

<style scoped>
  #index{
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: column;
  }
  .swiper{
    margin-top: 0.2rem;
    margin-left: auto;
    margin-right: auto;
    width: 94%;
    height: min-content;
  }
  .swiper swiper{
    height: 2.3rem;
  }
  .swiper swiper swiper-item img{
    width: 100%;
    height: 100%;
  }
  #order{
    margin-top: 0.2rem;
    width: 100%;
    height: min-content;
  }
  .item{
    width: 94%;
    height: min-content;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    border: 1px solid #fae4dc;
    border-radius: 10px;
  }
  .title{
    margin-top: 0.05rem;
    display: flex;
    flex-direction: row;
    width: 100%;
  }
  .title img{
    margin-left: 0.05rem;
    width: 0.7rem;
    height: 0.7rem;
  }
  .title span{
    line-height: 0.7rem;
    text-align: center;
  }
  .name{
    font-weight: bold;
    font-size: 0.32rem;
    margin-right: 3.9rem;
  }
  .status{
    color: green;
  }
  .body{
    margin-top: 0.06rem;
    width: 100%;
    height: min-content;
    display: flex;
    flex-direction: column;
  }
  .detail{
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: 1.6rem;
    background: #f2e5ca;
    display: flex;
    flex-direction: row;
  }
  .detail img{
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 0.1rem;
    width: 0.8rem;
    height: 0.5rem;
  }
  .foodItem{
    display: flex;
    flex-direction: column;
  }
  .foodItem span{
    margin-left: 0.36rem;
    font-family: 楷体;
    font-size: 0.35rem;
    margin-top: 0.08rem;
  }
  .more{
    line-height: 1.6rem;
    width: 1.5rem;
    text-align: center;
    font-weight: lighter;
    font-size: 0.25rem;
  }
  .time{
    font-size: 0.3rem;
    font-weight: lighter;
    margin-left: 0.76rem;
  }
  .total{
    display: flex;
    flex-direction: row;
    margin-left: 4.5rem;
    line-height: 0.5rem;
    text-align: center;
  }
  .total .price{
    font-weight: bolder;
    font-size: 0.42rem;
  }
  .footer{
    width: 100%;
    height: min-content;
    margin-top: 0.2rem;
    margin-bottom: 0.25rem;
    display: flex;
    flex-direction: row;
  }
  .footer button{
    background: white;
    border: 1px solid gray;
    border-radius: 10px;
    width: 2rem;
    font-size: 0.3rem;
    line-height: 0.7rem;
    text-align: center;
  }
  .pay{
    margin-left: 2.7rem;
  }
  .extraMeals{
    color: green;
  }
</style>
